<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps<{
  title: string;
  customStyle: string | Record<string, string>;
}>();

const style = computed(() => {
  if (!props.customStyle) return '';
  if (typeof props.customStyle === 'string') return props.customStyle;
  return Object.keys(props.customStyle as Record<string, string>)
    .map((key) => `${key}: ${(props.customStyle as Record<string, string>)[key]};`)
    .join('');
});

defineEmits(['click']);
</script>

<template>
  <view :style="style" class="bg-white rounded-lg py-5 px-4" @click="$emit('click')">
    <slot name="head">
      <view v-if="props.title" class="mb-5">
        <text class="text-xl text-primary font-semibold">{{ title }}</text>
      </view>
    </slot>
    <view class="relative">
      <slot></slot>
    </view>
  </view>
</template>
